<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>用户名</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="usermodelInJson.Code"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>姓名</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="usermodelInJson.Name"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>性别</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <SexSelector v-model="usermodelInJson.Sex"/>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>电话</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="usermodelInJson.Phone"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>邮箱</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="usermodelInJson.Email"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>称谓</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="usermodelInJson.Title"></el-input>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>加入日期</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-date-picker type="date" placeholder="选择日期" v-model="usermodelInJson.Joindate"></el-date-picker>
      </el-col>
      <el-col class="el-span-c">
        <span>出生日期</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-date-picker type="date" placeholder="选择日期" v-model="usermodelInJson.Birthdate"></el-date-picker>
      </el-col>
      <el-col class="el-span-c">
        <span>所属部门</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <DepartmentSelector v-model="usermodelInJson.Department"/>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>权限级别</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <UserTypeSelector v-model="usermodelInJson.Type"/>
      </el-col>
      <el-col class="el-span-c">
        <span></span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox label="经销商" v-model="usermodelInJson.Retail"></el-checkbox>
        <el-checkbox label="供应商" v-model="usermodelInJson.Supplier"></el-checkbox>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>地址</span>
      </el-col>
      <el-col class="el-input-large-c">
        <el-input v-model="usermodelInJson.Address"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span></span>
      </el-col>
      <el-col class="el-input-normal-c"></el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>备注</span>
      </el-col>
      <el-col class="el-input-large-c">
        <el-input v-model="usermodelInJson.Note"></el-input>
      </el-col>
    </el-row>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>数据管理</span>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1">
      <div>
        <el-button-group>
          <el-button
            size="mini"
            type="primary"
            :disabled="!this.$route.meta.create"
            @click="onSubmit"
          >保存</el-button>
          <el-button
            size="mini"
            :disabled="this.usermodelInJson.AutoId === undefined || this.usermodelInJson.AutoId === 0||!this.$route.meta.delete"
            @click="onDelete"
          >删除</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" :disabled="regDisable" @click="regBoxVisible=true">注册</el-button>
          <el-button size="mini" :disabled="chgPwdDisable" @click="chgPwd">修改密码</el-button>
          <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
        </el-button-group>
      </div>
    </div>
    <div slot="footer" style="border-top: 1px dashed #dcdfe6;font-size: larger;padding-top: 10px;"></div>
    <el-dialog :visible.sync="regBoxVisible" :modal="false">
      <el-row class="el-low-c" type="flex" justify="start" align="middle">
        <el-col class="el-span-c">
          <span>权域</span>
        </el-col>
        <el-col class="el-input-large-c">
          <el-select v-model="domainSlt" placeholder="权域">
            <el-option
              v-for="item in domains"
              :key="item.AutoId"
              :label="item.Name"
              :value="item.AutoId"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="el-low-c" type="flex" justify="start" align="middle">
        <el-col class="el-span-c">
          <span>角色</span>
        </el-col>
        <el-col class="el-input-large-c">
          <el-select v-model="roleSlt" placeholder="角色">
            <el-option
              v-for="item in roles"
              :key="item.AutoId"
              :label="item.Name"
              :value="item.AutoId"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="el-low-c" type="flex" justify="start" align="middle">
        <el-col class="el-span-c">
          <span>密码</span>
        </el-col>
        <el-col class="el-input-large-c">
          <el-input placeholder="请输入密码" v-model="setpwd"></el-input>
        </el-col>
      </el-row>
      <el-row class="el-low-c" type="flex" justify="start" align="middle">
        <el-button @click="register" type="primary">注册</el-button>
      </el-row>
    </el-dialog>
  </el-dialog>
</template>
<script>
import UserTypeSelector from '@/components/Selector/UserTypeSelector.vue'
import DepartmentSelector from '@/components/Selector/DepartmentSelector.vue'
import SexSelector from '@/components/Selector/SexSelector.vue'
import { delUser, setUser, getLogin, register, setPassword } from '@/api/user'
import { listDomain } from '@/api/domain'
import { listRole } from '@/api/role'
import { Model } from 'vue-property-decorator'

export default {
  components: {
    UserTypeSelector,
    DepartmentSelector,
    SexSelector
  },
  data() {
    return {
      dialogVisible: false,
      usermodelInJson: { AutoId: 0 },
      loginModel: {},
      regDisable: true,
      chgPwdDisable: true,
      domainSlt: null,
      domains: [],
      roleSlt: null,
      roles: [],
      setpwd: '',
      regBoxVisible: false
    }
  },
  watch: {
    usermodel: function(value) {
      if (value.AutoId === this.usermodelInJson.AutoId) return
      this.usermodelInJson = value
      //下面设置注册和删除按钮的只读
      if (!this.usermodelInJson.AutoId || this.usermodelInJson.AutoId === 0) {
        this.regDisable = true
        this.chgPwdDisable = true
      } else {
        getLogin(this.usermodelInJson.AutoId)
          .then(response => {
            this.regDisable = response.Data || !this.$route.meta.func1
            this.chgPwdDisable = !response.Data
          })
          .catch(error => {
            this.regDisable = true
            this.chgPwdDisable = true
          })
      }
    }
  },
  props: { usermodel: Object },
  methods: {
    onSubmit() {
      setUser(this.usermodelInJson)
        .then(response => {
          if (response.Result === 0) {
            this.usermodelInJson = response.Data
            this.$message('保存成功')
            this.regDisable = false
            this.$emit('userSaveComplete', this.usermodelInJson)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          //this.$alert(error, '错误')
        })
    },
    onDelete() {
      delUser(this.usermodelInJson)
        .then(response => {
          if (response.Result === 0) {
            this.$message('删除成功')
            ;(this.dialogVisible = false),
              this.$emit('userDelComplete', this.usermodelInJson.AutoId)
            this.usermodelInJson = {}
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          //this.$alert(error, '错误')
        })
    },
    register() {
      const loginModel = {
        UserId: this.usermodelInJson.AutoId,
        Password: this.setpwd,
        Status: 1
      }
      register(loginModel, this.domainSlt, this.roleSlt)
        .then(response => {
          if (response.Data) {
            this.$message({
              type: 'info',
              message: '注册成功'
            })
            this.regDisable = true
            this.chgPwdDisable = false
            this.regBoxVisible = false
          } else {
            this.$message({
              type: 'error',
              message: '注册失败:' + response.Message
            })
          }
        })
        .catch(error => {
          this.$message({
            type: 'error',
            message: '注册失败:' + error
          })
        })
    },
    chgPwd() {
      this.$prompt('请输入密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          const loginModel = {
            UserId: this.usermodelInJson.AutoId,
            Password: value,
            Status: 1
          }
          setPassword(loginModel)
            .then(response => {
              if (response.Data) {
                this.$message({
                  type: 'info',
                  message: '修改密码成功'
                })
              } else {
                this.$message({
                  type: 'error',
                  message: '修改失败:' + response.Message
                })
              }
            })
            .catch(error => {
              this.$message({
                type: 'error',
                message: '修改失败:' + error
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    }
  },
  mounted() {
    listDomain(0, 1000, null)
      .then(response => {
        if (response.Result === 0) {
          this.domains = response.Data
        }
      })
      .catch(error => {
        console.log(error)
      })
    listRole(0, 1000, null)
      .then(response => {
        if (response.Result === 0) {
          this.roles = response.Data
        }
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

<style>
.el-span-c {
  padding: 5px;
  height: 40px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}
.el-input-normal-c {
  width: 300px;
  height: 40px;
  text-align: left;
}
.el-input-large-c {
  width: 500px;
  height: 40px;
  text-align: left;
}
.el-low-c {
  height: 40px;
  margin-bottom: 15px;
  text-align: left;
}
</style>